<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <img src="../images/dmx.jpg" alt="" />
    <img src="../images/dmx1.jpg" alt="" />

    <a href="/" id="sendMSG">发送数据</a>

<script>
  if ("serviceWorker" in navigator) {
    window.addEventListener("load", function() {
      navigator.serviceWorker.register("/sw.js", {scope: '/'})
        .then(function(registration) {
          // 注册成功
          console.log( "ServiceWorker registration successful with scope: ", registration.scope )
        })
        .catch(function(err) {
          // 注册失败:(
          console.log("ServiceWorker registration failed: ", err)
        });



        // 消息
        navigator.serviceWorker.addEventListener('message', function (event) {
            // 接受数据，
            console.log('页面接受的数据：',  event);
        });

        document.getElementById('sendMSG').addEventListener('click', function () {
            console.log('绑定点击事件，点击后发送数据');
            navigator.serviceWorker.controller.postMessage('嘀嘀嘀');
        }, {passive: false});

    })
  }
</script>



  </body>
</html>
